<template>
	<view>
		<view class="banner-box">
			<swiper class="banner" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
				@change="bannerChange">
				<swiper-item v-for="(item, index) in banner" :key="index">
					<image :src="item" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- <image class="back-icon" src="../../static/back3.png" mode="" @click="utils.pageBack"></image> -->
			<view class="header-top">
				<view class="header-inner fa"
					:style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight(), background: opacity}">
					<image class="back-icon" src="../../static/back3.png" mode="" @click="utils.pageBack"></image>
					<view class="header-title" :style="{color: titleColor}">商品详情</view>
				</view>
			</view>
			<view class="fraction fa">{{swiperCurrent + 1}}/{{banner.length}}</view>
		</view>
		<view class="buytype-wrapper fa jcsb bgf">
			<view class="price">￥{{info.price}}</view>
			<view class="share fa">
				<image class="share-icon" src="../../static/share.png" mode=""></image>
				<view>分享</view>
				<button class="share-btn" open-type="share"></button>
			</view>
		</view>
		<view class="info-box">
			<view class="name">{{info.name}}</view>
			<view class="stock-box fa jcsb">
				<view>库存：{{info.stock}}件</view>
				<view>销量：{{info.sales}}件</view>
			</view>
			<view class="delivery-box fa">
				<image class="delivery-icon" src="../../static/delivery.png" mode=""></image>
				<view>{{info.isTimely==0?'送货上门，当天下单，当天进行配送':'送货上门，当天下单，第二天进行送达'}}</view>
			</view>
		</view>
		<view class="spec-select fa bgf" @click="couponOpen">
			<view class="selected">领券</view>
			<view class="flex1 fa">
				<view class="cpon-box"></view>
				<view class="spec-name flex1 fa fz26 ell1" v-if="couponNow.couponId">
					<view class="cpon-box fa">
						<image class="cpon-icon" src="../../static/coupon.png" mode=""></image>
						<view class="cpon-right">满{{couponNow.need}}减{{couponNow.derate}}</view>
					</view>
				</view>
				<view class="spec-name flex1 fz26 ell1" v-else>暂无可领取优惠券</view>
				<image class="right-icon" src="../../static/right.png" mode=""></image>
			</view>
		</view>
		<view class="spec-select fa bgf" @click="specOpen">
			<view class="selected">已选</view>
			<view class="flex1 fa">
				<view class="spec-name flex1 fz26 ell1">{{goods_item[specIndex].fullName}} {{count}}件</view>
				<image class="right-icon" src="../../static/right.png" mode=""></image>
			</view>
		</view>
		<view class="evaluate-wrapper bgf">
			<view class="title fa jcsb">
				<view>用户评价</view>
				<view class="viewall fa" @click="utils.navTo('/pages/cate/goods_comment', {id: id})" v-if="hasComment">
					<view>查看全部</view>
					<image class="rightimg" src="../../static/right.png" mode=""></image>
				</view>
				<view class="viewall" v-else>暂无评价</view>
			</view>
			<view class="evaluate-box" v-if="comment.content">
				<view class="evaluate-list">
					<view class="fa">
						<image class="avatar" :src="comment.account.avatar" mode=""></image>
						<view class="nickname">{{comment.account.name}}</view>
						<uni-rate size="16" active-color="#FE3134" v-model="comment.distribution" :readonly="true" />
					</view>
					<view class="time">{{comment.createTime}}</view>
					<view class="content">{{comment.content}}</view>
				</view>
			</view>
		</view>
		<view class="detail-title">商品详情</view>
		<view class="detail-box">
			<image :src="item" mode="widthFix" v-for="(item,index) in detailImage" :key="index"></image>
			<!-- <rich-text :nodes="info.details"></rich-text> -->
		</view>
		<view class="operate-wrapper">
			<view class="operate-box fa jcsb">
				<view class="left-three fa">
					<view class="left-box fa fdc jcc">
						<image class="icon" src="../../static/service.png" mode=""></image>
						<view>客服</view>
						<button class="contact-btn" open-type="contact"></button>
					</view>
					<view class="left-box fa fdc jcc" @click="collectGoods">
						<image class="icon" src="../../static/collect-fill.png" mode="" v-if="isCollect"></image>
						<image class="icon" src="../../static/collect.png" mode="" v-else></image>
						<view>{{isCollect ? '已收藏' : '收藏'}}</view>
					</view>
					<view class="left-box fa fdc jcc" @click="goCart">
						<image class="icon" src="../../static/cart.png" mode=""></image>
						<view>购物车</view>
					</view>
				</view>
				<view class="btn-box fa">
					<view class="addcart fa jcc" @click="onAddCart">加入购物车</view>
					<view class="buynow fa jcc" @click="buyNow">立即购买</view>
				</view>
			</view>
			<view class="operate-place"></view>
		</view>
		<uni-popup ref="couponPop" type="bottom" :mask-click="true" border-radius="10px 10px 0 0">
			<view class="coupon-wrapper">
				<view class="coupon-title fa">
					<view>领券</view>
					<image class="close-icon" src="../../static/close.png" mode="" @click="closeCoupon"></image>
				</view>
				<view class="coupon-box fa fdc">
					<scroll-view class="coupon-inner" scroll-y="true">
						<view class="coupon-list fa" v-for="(item, index) in couponList" :key="index"
							:class="{grey: item.state > 0}">
							<view class="money fa">
								<view class="rmb">¥</view>
								<view>{{item.derate}}</view>
							</view>
							<view class="title-box">
								<view class="full">满{{item.need}}使用</view>
								<view class="time" v-if="item.loseType == 1">{{item.timer}}到期</view>
							</view>
							<view class="usebtn" @click="receiveCoupon(item.couponId)">立即领取</view>
							<view class="red-paper">新人红包</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" :safe-area='false'>
			<view class="pop-box bgf">
				<view class="goods-box flex">
					<image class="goods-img" :src="goods_item_selected.image" mode=""></image>
					<view class="flex1">
						<view class="price tc1">￥{{goods_item_selected.price}}</view>
						<view>库存：{{goods_item_selected.stock}}件</view>
						<view>已选择 {{goods_item_selected.fullName}} {{count}}件</view>
					</view>
				</view>
				<view class="specs-wrapper" v-for="(item, index) in specList" :key="index">
					<view>{{item.name}}</view>
					<view class="specs-box flex fww">
						<view class="specs-list fa jcc" :class="{active: row.selected == 1}"
							v-for="(row, col) in item.svs" :key="col" @click="selectSpec(index, col)">{{row.value}}
						</view>
					</view>
				</view>
				<view class="count-wrapper fa jcsb">
					<view>数量</view>
					<view class="count-box fa">
						<image class="reduce" src="../../static/reduce.png" mode="" @click="reduceCount"></image>
						<input type="number" class="count" v-model="count" @blur="countBlur" />
						<image class="plus" src="../../static/plus2.png" mode="" @click="plusCount"></image>
					</view>
				</view>
				<view class="btn-box fa jcc">
					<view class="addcart fa jcc" @click="addCart">加入购物车</view>
					<view class="buynow fa jcc" @click="goBuy">立即购买</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opacity: 'rgba(255,255,255,0)',
				titleColor: 'rgba(0,0,0,0)',
				id: '',
				info: {
					mainImg: '',
					price: '',
					name: '',
					stock: '',
					sales: '',
					details: ''
				},
				banner: [],
				swiperCurrent: 0, //swiper当前第几张
				couponList: [],
				couponNow: {},
				comment: {},
				goods_item: [], //商品所有规格的item信息
				goods_item_selected: {}, //当前选择的规格的商品的item信息
				specList: [],
				specIndex: 0,
				specId: '',
				count: 1,
				isCollect: false,
				content: '',
				timer: '',
				collectLock: true,
				hasComment: 0,
				detailImage: ''
			};
		},
		onPageScroll(e) {
			this.opacity = 'rgba(255,255,255,' + this.utils.opacityCompute(e.scrollTop) + ')'
			this.titleColor = 'rgba(51,51,51,' + this.utils.opacityCompute(e.scrollTop) + ')'
		},
		onShareAppMessage() {
			return {
				title: '商品详情',
				path: '/pages/index/goods_detail?id=' + this.id
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getDetail()
				this.getCollect()
				this.getComment()
				this.getCoupon()
			}
		},
		methods: {
			bannerChange(e) {
				this.swiperCurrent = e.detail.current
			},
			getDetail() {
				this.api.goodsDetailFunc({
					productId: this.id
				}).then(res => {
					if (res.code == 200) {
						// if (res.data.details) {
						// 	let filterImgContent = res.data.details.replace(/\<img/g,
						// 		"<img style='width:100%;height:auto;'");
						// 	res.data.details = filterImgContent;
						// }
						this.detailImage = res.data.details.split(',')
						this.info = res.data
						this.banner = res.data.swiperImg.split(',')
						this.specList = res.data.sns
						this.specId = res.data.skus[0].skuId
						this.specList.forEach(item => {
							item.svs.forEach((row, col) => {
								if (col == 0) {
									row.selected = 1
								} else {
									row.selected = 0
								}
							})
						})
						this.goods_item = res.data.skus
						this.goods_item_selected = res.data.skus[0]
					}
				})
			},
			// 商品详情里面展示最新的一条好评
			getComment() {
				this.api.goodsCommentFunc({
					productId: this.id
				}).then(res => {
					if (res.code == 200) {
						if (res.data.data.rows.length > 0) {
							this.hasComment = 1
							for (var i = 0; i < res.data.data.rows.length; i++) {
								if (res.data.data.rows[i].t == 0) {
									this.comment = res.data.data.rows[i]
									break
								}
							}
						}
					}
				})
			},
			getCoupon() {
				this.api.couponListFunc().then(res => {
					if (res.code == 200) {
						this.couponList = res.data
						if (this.couponList.length > 0) {
							this.couponNow = this.couponList[0]
						} else {
							this.couponNow = {}
						}
					}
				})
			},
			getCollect() {
				this.api.collectHaveFunc({
					productId: this.id
				}).then(res => {
					if (res.code == 200) {
						this.isCollect = res.data
					}
				})
			},
			// 领券
			couponOpen() {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				if (this.couponList.length > 0) {
					this.$refs.couponPop.open()
				} else {
					uni.showToast({
						title: '暂无可领取优惠券',
						icon: 'none'
					})
				}
			},
			closeCoupon() {
				this.$refs.couponPop.close()
			},
			receiveCoupon(id) {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				uni.showLoading({
					title: '加载中'
				})
				this.api.couponSaveFunc({
					couponId: id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: '领取成功'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					this.$refs.couponPop.close()
					this.getCoupon()
				}).catch(err => {
					uni.hideLoading()
					this.$refs.couponPop.close()
				})
			},
			// 选择规格
			specOpen() {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				this.$refs.popup.open()
			},
			// 收藏
			collectGoods() {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				if (!this.collectLock) return false
				this.collectLock = false
				this.timer = setTimeout(() => {
					this.collectLock = true
					clearTimeout(this.timer)
				}, 500)
				if (this.isCollect) {
					this.isCollect = false
					this.api.collectDelFunc({
						productId: this.id
					}).then(res => {
						if (res.code != 200) {
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							})
							this.getCollect()
						}
					}).catch(err => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
						this.getCollect()
					})
				} else {
					this.isCollect = true
					this.api.collectSaveFunc({
						productId: this.id
					}).then(res => {
						if (res.code != 200) {
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							})
							this.getCollect()
						}
					}).catch(err => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
						this.getCollect()
					})
				}
			},
			goCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			onAddCart() {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				this.$refs.popup.open()
			},
			buyNow() {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				this.$refs.popup.open()
			},
			// 选择规格
			selectSpec(index, col) {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				for (let i = 0; i < this.specList[index].svs.length; i++) {
					this.specList[index].svs[i].selected = 0
					if (i == col) {
						this.specList[index].svs[i].selected = 1
					}
				}
				this.$forceUpdate()
				let svsTemp = ''
				for (let i = 0; i < this.specList.length; i++) {
					svsTemp += this.specList[i].name + ":"
					for (let v = 0; v < this.specList[i].svs.length; v++) {
						if (this.specList[i].svs[v].selected) {
							svsTemp += this.specList[i].svs[v].value + ";"
							break
						}
					}
				}
				for (let i = 0; i < this.goods_item.length; i++) {
					if (this.goods_item[i].fullName == svsTemp) {
						this.specId = this.goods_item[i].skuId
						this.goods_item_selected = this.goods_item[i]
						break
					}
				}
				console.log(this.goods_item_selected)
				console.log(this.specId)
			},
			reduceCount() {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				if (this.count > 1) {
					this.count--
				}
			},
			plusCount() {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				this.count++
			},
			countBlur() {
				if (this.count == '' || this.count == NaN || this.count == null || this.count == 0) {
					this.count = 1
				}
			},
			addCart() {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				if (this.count > this.goods_item_selected.stock) {
					uni.showToast({
						title: '很抱歉，库存不足',
						icon: 'none',
						duration: 1000
					});
					return
				}
				this.api.cartAddFunc({
					productId: this.id,
					skuId: this.specId,
					num: this.count
				}).then(res => {
					if (res.code == 200) {
						this.$refs.popup.close()
						uni.showToast({
							title: '已加入购物车'
						})
						this.api.shoppingCountFunc().then(res => {
							if (res.code == 200) {
								uni.setStorageSync('cartNum', res.data)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goBuy() {
				if (!uni.getStorageSync('token')) return uni.navigateTo({
					url: '/pages/login/login'
				})
				if (this.count > this.goods_item_selected.stock) {
					uni.showToast({
						title: '很抱歉，库存不足',
						icon: 'none',
						duration: 1000
					});
					return
				}
				this.$refs.popup.close()
				uni.navigateTo({
					url: '/pages/cate/confirm_order?skuId=' + this.specId + '&num=' + this.count
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-inner {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-bottom: 16rpx;

		.back-icon {
			width: 56rpx;
			height: 56rpx;
		}

		.header-title {
			position: absolute;
			left: 140rpx;
			right: 140rpx;
			min-width: 0;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.banner-box {
		position: relative;

		.banner {
			width: 100%;
			height: 750rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.fraction {
			position: absolute;
			bottom: 22rpx;
			right: 40rpx;
			padding: 0 20rpx;
			height: 44rpx;
			border-radius: 22rpx;
			color: #fff;
			background-color: rgba(0, 0, 0, .3);
		}
	}

	.buytype-wrapper {
		padding: 16rpx 0 16rpx 24rpx;

		.price {
			font-size: 32rpx;
			font-weight: bold;
			color: #FE2525;
		}

		.share {
			position: relative;
			padding: 0 20rpx 0 14rpx;
			height: 58rpx;
			border-radius: 29rpx 0 0 29rpx;
			font-size: 26rpx;
			background-color: #F6F6F6;

			.share-icon {
				margin-right: 6rpx;
				width: 38rpx;
				height: 38rpx;
			}

			.share-btn {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
				border-radius: 29rpx 0 0 29rpx;
				opacity: 0;
			}
		}
	}

	.info-box {
		padding: 16rpx 24rpx;
		background-color: #fff;

		.name {
			font-size: 32rpx;
			font-weight: bold;
			line-height: 38rpx;
		}

		.stock-box {
			margin-top: 16rpx;
			font-size: 22rpx;
			color: #777;
		}

		.delivery-box {
			margin-top: 18rpx;
			padding-right: 20rpx;
			height: 56rpx;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #965222;
			background: linear-gradient(90deg, #FFF5EC 39%, #FFFFFF 100%);

			.delivery-icon {
				margin-right: 20rpx;
				width: 84rpx;
				height: 56rpx;
			}
		}
	}

	.spec-select {
		margin-top: 20rpx;
		padding: 26rpx 24rpx;

		.selected {
			margin-right: 48rpx;
			font-size: 26rpx;
			color: #777;
		}

		.spec-name {
			width: 570rpx;

			.cpon-box {
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 8rpx;
				background-color: #FFF3BD;

				.cpon-icon {
					width: 48rpx;
					height: 40rpx;
				}

				.cpon-right {
					padding: 0 8rpx;
					box-sizing: border-box;
					font-size: 22rpx;
					font-weight: bold;
					color: #F75725;
				}
			}
		}

		.right-icon {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.evaluate-wrapper {
		margin-top: 16rpx;

		.title {
			padding: 30rpx 24rpx;
			border-bottom: 1px solid #eee;

			.viewall {
				font-size: 26rpx;
				color: #666;

				.rightimg {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.evaluate-box {
			padding: 30rpx 30rpx 2rpx;

			.evaluate-list {
				margin-bottom: 30rpx;

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}

				.nickname {
					margin: 0 10rpx;
				}

				.time {
					margin-top: 10rpx;
					font-size: 22rpx;
					color: #999;
				}

				.content {
					margin-top: 20rpx;
					font-size: 22rpx;
				}
			}
		}
	}

	.detail-title {
		margin-top: 18rpx;
		padding: 24rpx;
		font-size: 32rpx;
		text-align: center;
		background: #fff;
	}

	.detail-box {
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.operate-wrapper {
		.operate-place {
			height: 110rpx;
		}

		.operate-box {
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			padding: 0 20rpx 0 0;
			height: 110rpx;
			background: #fff;
			z-index: 99;

			.left-three {
				font-size: 22rpx;
				color: #777;

				.left-box {
					position: relative;
					width: 100rpx;

					.icon {
						margin-bottom: 4rpx;
						width: 36rpx;
						height: 36rpx;
					}

					.contact-btn {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}

			.btn-box {
				.addcart {
					width: 190rpx;
					height: 66rpx;
					border-radius: 36rpx;
					color: #fff;
					background: #fcb52c;
				}

				.buynow {
					margin-left: 16rpx;
					width: 190rpx;
					height: 66rpx;
					border-radius: 36rpx;
					color: #fff;
					background: var(--theme);
				}
			}
		}
	}

	.coupon-wrapper {
		padding-top: 2rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;

		.coupon-title {
			position: relative;
			padding: 0 24rpx;
			height: 100rpx;
			font-size: 32rpx;
			font-weight: bold;

			.close-icon {
				position: absolute;
				right: 24rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 24rpx;
				height: 24rpx;
			}
		}

		.coupon-box {
			padding-bottom: 24rpx;
			height: 700rpx;
			overflow: hidden;

			.coupon-inner {
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				height: 700rpx;
			}

			.coupon-list {
				position: relative;
				margin-bottom: 24rpx;
				padding: 0 32rpx 0 48rpx;
				height: 180rpx;
				border-radius: 20rpx;
				color: #FE3134;
				background-color: #FFF7E3;

				&.grey {
					filter: grayscale(1);
				}

				.money {
					flex-basis: 30%;
					font-size: 58rpx;
					font-weight: bold;
					color: #FF2F2F;

					.rmb {
						font-size: 38rpx;
					}
				}

				.title-box {
					padding: 0 10rpx;
					flex-basis: 46%;

					.full {
						font-size: 32rpx;
						font-weight: bold;
					}

					.time {
						margin-top: 8rpx;
						font-size: 20rpx;
					}
				}

				.usebtn {
					position: relative;
					padding-left: 10rpx;
					flex-basis: 24%;
					text-align: right;
					font-size: 32rpx;
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 2rpx;
						height: 84rpx;
						border-left: 2rpx dashed #DC4A37;
					}
				}

				.red-paper {
					position: absolute;
					top: 0;
					left: 0;
					padding: 0 16rpx;
					border-radius: 20rpx 0 20rpx 0;
					height: 36rpx;
					line-height: 36rpx;
					font-size: 22rpx;
					color: #fff;
					background: linear-gradient(85deg, #FE5224 0%, #FD8B24 100%);
				}
			}
		}

		.receive-btn {
			margin-top: 100rpx;
			width: 556rpx;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #fff;
			background: linear-gradient(180deg, #EF743D 0%, #DE3920 100%);
		}
	}

	.pop-box {
		padding-bottom: 2rpx;
		border-radius: 16rpx 16rpx 0 0;

		.goods-box {
			padding: 30rpx 20rpx;
			border-bottom: 2rpx solid #eee;
			font-size: 24rpx;

			.goods-img {
				margin-right: 20rpx;
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}

			.price {
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.specs-wrapper {
			padding: 30rpx 20rpx;

			.specs-box {
				.specs-list {
					margin-top: 20rpx;
					margin-right: 20rpx;
					padding: 0 20rpx;
					height: 50rpx;
					border-radius: 50rpx;
					font-size: 24rpx;
					color: #666;
					background: #eee;

					&.active {
						color: #fff;
						background: var(--theme);
					}
				}
			}
		}

		.count-wrapper {
			padding: 0 20rpx;

			.count-box {
				.reduce {
					width: 48rpx;
					height: 48rpx;
				}

				.count {
					margin: 0 4rpx;
					padding: 0 10rpx;
					width: 80rpx;
					height: 48rpx;
					text-align: center;
					background: #F2F2F2;
				}

				.plus {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.btn-box {
			margin: 80rpx 40rpx 30rpx;

			.addcart {
				width: 300rpx;
				height: 70rpx;
				border-radius: 35rpx;
				color: #fff;
				background: #fcb52c;
			}

			.buynow {
				margin-left: 20rpx;
				width: 300rpx;
				height: 70rpx;
				border-radius: 35rpx;
				color: #fff;
				background: var(--theme);
			}
		}
	}
</style>